<template>
  <div class="positioning-demo">
    <h2 class="section-title">定位与层叠上下文</h2>
    <p class="section-intro">
      CSS定位是控制元素位置的重要机制，层叠上下文决定了元素的堆叠顺序。掌握这些概念对于复杂布局至关重要。
    </p>

    <div class="demo-grid">
      <!-- 定位类型 -->
      <div class="demo-card">
        <h3>定位类型详解</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>/* static: 默认定位，遵循正常文档流 */
.static { position: static; }

/* relative: 相对定位，相对于自身原始位置 */
.relative { position: relative; top: 20px; left: 20px; }

/* absolute: 绝对定位，相对于最近的定位祖先 */
.absolute { position: absolute; top: 0; right: 0; }

/* fixed: 固定定位，相对于视口 */
.fixed { position: fixed; bottom: 20px; right: 20px; }

/* sticky: 粘性定位，滚动时的特殊行为 */
.sticky { position: sticky; top: 0; }</code></pre>
          </div>
          <div class="demo-result">
            <div class="positioning-container">
              <div class="position-demo static-demo">Static (默认)</div>
              <div class="position-demo relative-demo">Relative (相对)</div>
              <div class="position-demo absolute-demo">Absolute (绝对)</div>
              <div class="position-demo sticky-demo">Sticky (粘性)</div>
            </div>
            <div class="position-controls">
              <label> <input type="checkbox" v-model="showFixed" /> 显示Fixed定位元素 </label>
            </div>
            <div v-if="showFixed" class="fixed-demo">Fixed (固定)</div>
          </div>
        </div>
      </div>

      <!-- z-index 层叠顺序 -->
      <div class="demo-card">
        <h3>Z-Index 层叠顺序</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>/* z-index 控制层叠顺序 */
.layer1 { z-index: 1; background: red; }
.layer2 { z-index: 2; background: blue; }
.layer3 { z-index: 3; background: green; }

/* 注意：只有定位元素才能使用 z-index */
.positioned { position: relative; z-index: 10; }

/* 负值 z-index 会在普通元素下方 */
.behind { z-index: -1; }</code></pre>
          </div>
          <div class="demo-result">
            <div class="zindex-demo">
              <div class="zindex-container">
                <div class="layer layer1" :style="{ zIndex: zIndexValues.layer1 }">
                  Layer 1 (z-index: {{ zIndexValues.layer1 }})
                </div>
                <div class="layer layer2" :style="{ zIndex: zIndexValues.layer2 }">
                  Layer 2 (z-index: {{ zIndexValues.layer2 }})
                </div>
                <div class="layer layer3" :style="{ zIndex: zIndexValues.layer3 }">
                  Layer 3 (z-index: {{ zIndexValues.layer3 }})
                </div>
              </div>
              <div class="zindex-controls">
                <div class="control-group">
                  <label>Layer 1 z-index:</label>
                  <input type="range" v-model="zIndexValues.layer1" min="-5" max="10" />
                  <span>{{ zIndexValues.layer1 }}</span>
                </div>
                <div class="control-group">
                  <label>Layer 2 z-index:</label>
                  <input type="range" v-model="zIndexValues.layer2" min="-5" max="10" />
                  <span>{{ zIndexValues.layer2 }}</span>
                </div>
                <div class="control-group">
                  <label>Layer 3 z-index:</label>
                  <input type="range" v-model="zIndexValues.layer3" min="-5" max="10" />
                  <span>{{ zIndexValues.layer3 }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 层叠上下文 -->
      <div class="demo-card">
        <h3>层叠上下文 (Stacking Context)</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>/* 创建层叠上下文的条件: */
/* 1. 根元素 (html) */
/* 2. position: absolute/relative 且 z-index ≠ auto */
/* 3. position: fixed/sticky */
/* 4. opacity < 1 */
/* 5. transform ≠ none */
/* 6. filter ≠ none */
/* 7. will-change 指定任何属性 */

.stacking-context {
  position: relative;
  z-index: 1; /* 创建层叠上下文 */
}</code></pre>
          </div>
          <div class="demo-result">
            <div class="stacking-context-demo">
              <div class="context-example">
                <div class="parent-context">
                  父级上下文 (z-index: 1)
                  <div class="child-high">子元素 (z-index: 100)</div>
                </div>
                <div class="sibling-context">
                  兄弟上下文 (z-index: 2)
                  <div class="child-low">子元素 (z-index: 1)</div>
                </div>
              </div>
              <div class="context-explanation">
                <p>
                  即使子元素的z-index更高(100)，但由于父级上下文的z-index较低(1)，所以仍然在兄弟上下文(2)的下方。
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 粘性定位详解 -->
      <div class="demo-card">
        <h3>粘性定位 (Sticky) 详解</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>/* 粘性定位：滚动时的特殊行为 */
.sticky-header {
  position: sticky;
  top: 0; /* 距离顶部0px时开始粘性 */
  background: white;
  z-index: 10;
}

/* 粘性定位的条件: */
/* 1. 必须指定 top/bottom/left/right 之一 */
/* 2. 父容器不能有 overflow: hidden */
/* 3. 父容器必须有足够的高度 */</code></pre>
          </div>
          <div class="demo-result">
            <div class="sticky-demo-container">
              <div class="sticky-content">
                <div class="sticky-header">粘性头部 - 滚动试试</div>
                <div class="content-section">
                  <h4>内容区域 1</h4>
                  <p>这里是一些内容...</p>
                  <p>继续滚动查看粘性效果</p>
                </div>
                <div class="content-section">
                  <h4>内容区域 2</h4>
                  <p>更多内容...</p>
                  <p>粘性头部会保持在顶部</p>
                </div>
                <div class="content-section">
                  <h4>内容区域 3</h4>
                  <p>最后的内容...</p>
                  <p>直到容器结束</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 定位实战案例 -->
      <div class="demo-card">
        <h3>定位实战案例</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>/* 案例1: 居中定位 */
.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 案例2: 角标定位 */
.badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: red;
  border-radius: 50%;
}

/* 案例3: 遮罩层 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
}</code></pre>
          </div>
          <div class="demo-result">
            <div class="practical-examples">
              <!-- 居中定位 -->
              <div class="example-item">
                <h4>绝对居中</h4>
                <div class="center-container">
                  <div class="center-box">居中元素</div>
                </div>
              </div>

              <!-- 角标定位 -->
              <div class="example-item">
                <h4>角标定位</h4>
                <div class="badge-container">
                  <div class="card-with-badge">
                    卡片内容
                    <div class="badge">99+</div>
                  </div>
                </div>
              </div>

              <!-- 遮罩层 -->
              <div class="example-item">
                <h4>遮罩层</h4>
                <button @click="showOverlay = true">显示遮罩</button>
                <div v-if="showOverlay" class="overlay" @click="showOverlay = false">
                  <div class="modal" @click.stop>
                    <h4>模态框</h4>
                    <p>点击外部关闭</p>
                    <button @click="showOverlay = false">关闭</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 层叠顺序规则 -->
      <div class="demo-card">
        <h3>层叠顺序规则</h3>
        <div class="code-example">
          <div class="code-block">
            <pre><code>/* 层叠顺序 (从底到顶): */
/* 1. 根元素的背景和边框 */
/* 2. 负 z-index 的定位元素 */
/* 3. 非定位的块级元素 */
/* 4. 非定位的浮动元素 */
/* 5. 非定位的内联元素 */
/* 6. z-index: 0 的定位元素 */
/* 7. 正 z-index 的定位元素 */

/* 同级元素按 HTML 顺序，后来居上 */</code></pre>
          </div>
          <div class="demo-result">
            <div class="stacking-order-demo">
              <div class="stacking-visualization">
                <div class="order-item negative-z">负z-index (-1)</div>
                <div class="order-item block-element">块级元素</div>
                <div class="order-item float-element">浮动元素</div>
                <div class="order-item inline-element">内联元素</div>
                <div class="order-item zero-z">z-index: 0</div>
                <div class="order-item positive-z">正z-index (1)</div>
              </div>
              <div class="order-explanation">
                <p>从下到上的层叠顺序可视化展示</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="positioning-tips">
      <h3>定位最佳实践</h3>
      <div class="tips-grid">
        <div class="tip-card">
          <h4>🎯 选择合适的定位</h4>
          <ul>
            <li>布局用 relative，脱离文档流用 absolute</li>
            <li>固定元素用 fixed，滚动效果用 sticky</li>
            <li>避免过度使用绝对定位</li>
          </ul>
        </div>
        <div class="tip-card">
          <h4>📐 理解定位参考</h4>
          <ul>
            <li>absolute 相对于最近的定位祖先</li>
            <li>fixed 相对于视口</li>
            <li>sticky 需要指定阈值</li>
          </ul>
        </div>
        <div class="tip-card">
          <h4>🔢 合理使用 z-index</h4>
          <ul>
            <li>建立 z-index 规范（如：10, 20, 30...）</li>
            <li>避免过大的 z-index 值</li>
            <li>理解层叠上下文的影响</li>
          </ul>
        </div>
        <div class="tip-card">
          <h4>⚡ 性能考虑</h4>
          <ul>
            <li>定位元素会创建新的层</li>
            <li>避免频繁改变定位属性</li>
            <li>使用 transform 代替 left/top 动画</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const showFixed = ref(false)
const showOverlay = ref(false)

const zIndexValues = ref({
  layer1: 1,
  layer2: 2,
  layer3: 3,
})
</script>

<style scoped lang="scss">
.positioning-demo {
  .section-title {
    font-size: 2rem;
    color: #333;
    margin-bottom: 1rem;
    border-bottom: 3px solid #9c27b0;
    padding-bottom: 0.5rem;
  }

  .section-intro {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 2rem;
    line-height: 1.6;
  }

  .demo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .demo-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    background: #fafafa;

    h3 {
      margin: 0 0 1rem 0;
      color: #9c27b0;
      font-size: 1.3rem;
    }

    .code-example {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .code-block {
      background: #2d3748;
      border-radius: 6px;
      padding: 1rem;
      overflow-x: auto;

      pre {
        margin: 0;
        color: #e2e8f0;
        font-family: 'Fira Code', monospace;
        font-size: 0.9rem;
        line-height: 1.4;
      }
    }

    .demo-result {
      background: white;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      padding: 1rem;
      min-height: 100px;
    }
  }

  .positioning-tips {
    .tips-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1rem;
    }

    .tip-card {
      background: #f3e5f5;
      border-radius: 8px;
      padding: 1.5rem;
      border-left: 4px solid #9c27b0;

      h4 {
        margin: 0 0 0.5rem 0;
        color: #7b1fa2;
        font-size: 1.1rem;
      }

      ul {
        margin: 0;
        padding-left: 1.5rem;

        li {
          margin-bottom: 0.25rem;
          color: #666;
          font-size: 0.9rem;
        }
      }
    }
  }
}

// 演示样式
.positioning-container {
  position: relative;
  height: 200px;
  border: 2px dashed #ccc;
  background: #f9f9f9;
  overflow: hidden;

  .position-demo {
    width: 100px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 4px;
    margin: 5px;
  }

  .static-demo {
    background: #e3f2fd;
    border: 2px solid #2196f3;
  }

  .relative-demo {
    background: #e8f5e8;
    border: 2px solid #4caf50;
    position: relative;
    top: 20px;
    left: 20px;
  }

  .absolute-demo {
    background: #fff3e0;
    border: 2px solid #ff9800;
    position: absolute;
    top: 10px;
    right: 10px;
  }

  .sticky-demo {
    background: #fce4ec;
    border: 2px solid #e91e63;
    position: sticky;
    top: 0;
  }
}

.position-controls {
  margin-top: 1rem;

  label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
  }
}

.fixed-demo {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #ffebee;
  border: 2px solid #f44336;
  padding: 10px;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  z-index: 1000;
}

.zindex-demo {
  .zindex-container {
    position: relative;
    height: 200px;
    margin-bottom: 1rem;

    .layer {
      position: absolute;
      width: 120px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      font-weight: 500;
      border-radius: 6px;
      color: white;
      text-align: center;
      line-height: 1.2;
    }

    .layer1 {
      background: #f44336;
      top: 20px;
      left: 20px;
    }

    .layer2 {
      background: #2196f3;
      top: 40px;
      left: 60px;
    }

    .layer3 {
      background: #4caf50;
      top: 60px;
      left: 100px;
    }
  }

  .zindex-controls {
    .control-group {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.5rem;

      label {
        min-width: 120px;
        font-size: 0.9rem;
      }

      input[type='range'] {
        flex: 1;
      }

      span {
        min-width: 30px;
        text-align: center;
        font-weight: 500;
      }
    }
  }
}

.stacking-context-demo {
  .context-example {
    position: relative;
    height: 150px;

    .parent-context {
      position: relative;
      z-index: 1;
      background: #ffcdd2;
      border: 2px solid #f44336;
      padding: 10px;
      width: 200px;
      height: 80px;
      font-size: 0.9rem;

      .child-high {
        position: absolute;
        z-index: 100;
        background: #c8e6c9;
        border: 2px solid #4caf50;
        padding: 5px;
        top: 40px;
        left: 50px;
        font-size: 0.8rem;
      }
    }

    .sibling-context {
      position: absolute;
      z-index: 2;
      background: #e1f5fe;
      border: 2px solid #03a9f4;
      padding: 10px;
      width: 200px;
      height: 80px;
      top: 30px;
      left: 100px;
      font-size: 0.9rem;

      .child-low {
        position: absolute;
        z-index: 1;
        background: #fff3e0;
        border: 2px solid #ff9800;
        padding: 5px;
        top: 40px;
        left: 50px;
        font-size: 0.8rem;
      }
    }
  }

  .context-explanation {
    margin-top: 1rem;
    padding: 1rem;
    background: #f5f5f5;
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1.4;
  }
}

.sticky-demo-container {
  .sticky-content {
    height: 300px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 6px;

    .sticky-header {
      position: sticky;
      top: 0;
      background: #2196f3;
      color: white;
      padding: 1rem;
      font-weight: 500;
      z-index: 10;
    }

    .content-section {
      padding: 1rem;
      border-bottom: 1px solid #eee;

      h4 {
        margin: 0 0 0.5rem 0;
        color: #333;
      }

      p {
        margin: 0.5rem 0;
        color: #666;
        line-height: 1.4;
      }
    }
  }
}

.practical-examples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;

  .example-item {
    h4 {
      margin: 0 0 0.5rem 0;
      color: #333;
      font-size: 1rem;
    }
  }

  .center-container {
    position: relative;
    height: 100px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;

    .center-box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #e3f2fd;
      border: 2px solid #2196f3;
      padding: 10px;
      border-radius: 4px;
      font-size: 0.9rem;
    }
  }

  .badge-container {
    .card-with-badge {
      position: relative;
      background: white;
      border: 1px solid #ddd;
      border-radius: 6px;
      padding: 1rem;
      width: 120px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;

      .badge {
        position: absolute;
        top: -8px;
        right: -8px;
        background: #f44336;
        color: white;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        font-weight: 500;
      }
    }
  }
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;

  .modal {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    max-width: 300px;
    text-align: center;

    h4 {
      margin: 0 0 1rem 0;
      color: #333;
    }

    p {
      margin: 0 0 1rem 0;
      color: #666;
    }

    button {
      padding: 8px 16px;
      background: #2196f3;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;

      &:hover {
        background: #1976d2;
      }
    }
  }
}

.stacking-order-demo {
  .stacking-visualization {
    position: relative;
    height: 200px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;

    .order-item {
      position: absolute;
      width: 150px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      font-weight: 500;
      border-radius: 4px;
      left: 20px;
    }

    .negative-z {
      z-index: -1;
      background: #ffcdd2;
      top: 20px;
    }

    .block-element {
      background: #e1f5fe;
      top: 40px;
    }

    .float-element {
      float: left;
      background: #e8f5e8;
      top: 60px;
    }

    .inline-element {
      display: inline-block;
      background: #fff3e0;
      top: 80px;
    }

    .zero-z {
      position: relative;
      z-index: 0;
      background: #f3e5f5;
      top: 100px;
    }

    .positive-z {
      position: relative;
      z-index: 1;
      background: #e0f2f1;
      top: 120px;
    }
  }

  .order-explanation {
    margin-top: 1rem;

    p {
      margin: 0;
      color: #666;
      font-size: 0.9rem;
      font-style: italic;
    }
  }
}
</style>
